<template>
	<div class="detail4">
		<h2 class="tit">预约挂号退费详情</h2>
		<div class="main">
			<p class="title">预约挂号信息</p>
			<Row class="box">					
				<Col span="8">
					<div class="address">						
						<span class="s1">电子挂号码:</span>
						<span>{{info.orderNumber}}</span>					
					</div>
					<div class="address">					
						<span class="s1">挂号医生:</span>
						<span>{{info.doctorName}}</span>			
					</div>
					<div class="address">						
						<span class="s1">就诊人:</span>
						<span>{{info.memberName}}</span>					
					</div>
				</Col>  
				<Col span="8">
					<div class="address">						
						<span class="s1">出诊机构:</span>
						<span>{{info.hospitalName}}</span>
					</div>				
					<div class="address">						
						<span class="s1">医师服务费:</span>
						<span>{{info.registrationFee}}</span>
					</div>
					<div class="address">
						<span class="s1">预约时段:</span>
						<span>{{info.timeRange}}</span>				
					</div>
				</Col>
				<Col span="8">
					<div class="address">						
						<span class="s1">挂号科室:</span>
						<span>{{info.department}}</span>		
					</div>
					<div class="address">					
						<span class="s1">科室区域:</span>
						<span>{{info.sectionArea}}</span>				
					</div>
					<div class="address">				
						<span class="s1">就诊日期:</span>
						<span>{{info.appointmentTime}}</span>	
					</div>
				</Col>
			</Row>
		</div>
		<div class="main">
			<p class="title">退费信息</p>
			<Row class="box">					
				<Col span="8">
					<div class="address">
						<span class="s1">退费状态:</span>
						<span>{{['申请中', '已退款', '拒绝退款', '退款中', '同意退款'][info.refundOrderStatus]}}</span>		
					</div>
					<div class="address" v-if="info.refundReason">			
						<span class="s1">申请退款原因:</span>
						<span>{{info.refundReason}}</span>
					</div>
				</Col>
				<Col span="8">
					<div class="address">
						<span class="s1">退款金额:</span>
						<span v-if="info.refundOrderStatus != 1">暂未退款</span>
						<span v-else>{{info.refundAmt}}</span>	
					</div>
					<div class="address" v-if="info.refundAuditorReason">
						<span class="s1">拒绝原因:</span>
						<span>{{info.refundAuditorReason}}</span>
					</div>
				</Col>
				<Col span="8"  v-if="info.refundAuditorTime">
					<div class="address">
						<span class="s1">审核时间:</span>
						<span>{{info.refundAuditorTime}}</span>	
					</div>
				</Col>
			</Row>
		</div>
		<div class="btn-group">
			<feeBackBtn :id="$route.query.id" :feeBackInfo="{
			refundAmt: info.refundAmt,
			refundTradingChannels: info.refundTradingChannels,
			refundOrderStatus: info.refundOrderStatus}" />
			<Button @click="handleBack">
				<i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>返回
			</Button>
		</div>
	</div>
</template>

<script>
import feeBackBtn from './components/feeBackBtn';
import api from "@/api/commonApi";
export default {
	name: '预约挂号退费详情',
	components: {
		feeBackBtn
	},
	data() {
		return {
			info: {}
		}
	},
	mounted() {
		this.findWxAppointmentRegistrationEntityDtoById();
	},
	methods: {
		findWxAppointmentRegistrationEntityDtoById() {
			this.$axios.post(api.findWxAppointmentById, {id: this.$route.query.businessId}).then(resp => {
				this.info = resp.data.object;
				this.info.timeRange = resp.data.object.timeStart + '-' + resp.data.object.timeEnd;
			}).catch(err => {
			});
		},
		handleBack() {
			this.$router.push({
				path: '/index/orders/feedBackMgt/list',
				query: this.$route.query
			});
		},
	}
}
</script>

<style scoped lang="less">
.detail4 {
	width: calc(100%);
	padding: 10px 0px;
	margin: 0 auto;
	background: #fff;
	.tit {
		margin:10px 0;
		font-weight:bold;
		text-align:center;
	}	
	.main {
		width: 98%;
		display: flex;
		flex-direction: column;
		margin: 10px auto;
		border: 1px solid #f0f0f0;
		box-shadow: 0 4px 3px #ebedf8;
		border-radius: 5px;
		margin-bottom: 20px;
		.title {
			font-size: 20px;
			padding-left: 15px;
			margin-bottom: 20px;
			color: #333;
			height: 40px;
			line-height: 40px;
			background: #ebedf8;         
    	}
		.box{
			padding: 0 40px;
		}
		.address {
			display: flex;
			flex-direction: row;    
			.s1 {
				min-width: 80px;
				margin-right: 10px;
				margin-bottom: 15px;
			}
		}
	}
	.btn-group {
		margin-top: 20px;
		text-align: center;
		margin-bottom: 10px;
	}
}
</style>